import React, { useEffect } from "react";
import { Button, Form, Input, Card, message } from "antd";
// 引入样式
import style from "../index.module.css";
// 引入api请求
import {
  addHosSetListRequest,
  GetInformationAccordingToID,
  updateHosSetFromIdRequest,
} from "@/api/hospital/hospitalSet";
// 引入类型
import type { addHosSetListParamsType } from "@/api/hospital/model/hospitalSetTypes";

import { useNavigate, useParams } from "react-router-dom";
export default function AddResult() {
  //通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
  const [form] = Form.useForm();
  const navigate = useNavigate();
  // 获取传来的id
  const { id } = useParams();
  // 当组件加载的时候,开始请求分页列表的数据
  useEffect(() => {
    if (id) {
      const getHosDetail = async () => {
        // 发送请求
        const result = await GetInformationAccordingToID(id);
        form.setFieldsValue(result);
      };
      getHosDetail();
    }
  });

  // 新增医院的事件回调函数
  const dataSet = async (fieldValue: addHosSetListParamsType) => {
    // 如果有代表修改
    if (id) {
      await updateHosSetFromIdRequest({ ...fieldValue, id });
      navigate("/syt/hospital/hospitalSet");
      message.success("修改医院成功");
      return;
    }
    // 没有代表新增
    await addHosSetListRequest(fieldValue);
    message.success("增加医院成功");
    // 添加成功后 页面自动跳转
    navigate("/syt/hospital/hospitalSet");
  };

  return (
    <div>
      <Card>
        <Form
          name="basic"
          labelCol={{
            span: 2,
          }}
          // 通过form的方法使数据之间关联
          form={form}
          onFinish={dataSet}
        >
          <Form.Item
            label="医院名称"
            name="hosname"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="医院编号"
            name="hoscode"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="api基础路径"
            name="apiUrl"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="联系人姓名"
            name="contactsName"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="联系人手机"
            name="contactsPhone"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          {/* 按钮 */}
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Button type="primary" htmlType="submit" className={style.mr}>
              保存
            </Button>
            <Button
              type="default"
              htmlType="button"
              onClick={() => {
                navigate(-1);
              }}
            >
              返回
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
